import React, { useEffect, useState } from "react";
import { Col, Row, Modal, Table, Space, Pagination } from "antd";
import axios from "axios";
import {
  businessTypeEnum,
  managementTypeEnum,
} from "../../../ShopManage/common/shopEum.js";

import "./index.css";

/**
 * 模态框
 */
function ShopModel(props) {
  /**选择每页多少条纪律的状态值 默认每页显示10条纪律*/
  const [pageNum, setPageNum] = useState(3);
  /**选择第几页的状态值 默认显示第一页*/
  const [pageIndex, setPageIndex] = useState(1);
  const [data, setData] = useState([]);

  /** 渲染主营业态的逻辑 */
  function busFindNameByEum(item) {
    const bus = businessTypeEnum.filter((fitem) => {
      if (fitem.id === item) {
        return fitem;
      }
    });
    return bus[0].name;
  }
  /**渲染管理类型的逻辑 */
  function manFindNameByEum(item) {
    const man = managementTypeEnum.filter((fitem) => {
      if (fitem.id === item) {
        return fitem;
      }
    });
    return man[0].name;
  }

  function queryShops(condition) {
    axios({
      headers: {
        tenantId: 500,
        userId: 11111,
      },
      method: "post",
      url: "http://localhost:9102/shop/search",
      data: {
        condition,
        pageIndex: pageIndex,
        pageSize: pageNum,
        sortFields: [
          { field: "enabled", asc: false },
          { field: "created_at", asc: false },
          { field: "last_modified_at", asc: false },
        ],
      },
    }).then((data) => {
      setData(data.data);
    });
  }

  console.log("----", props);
  const [isModalVisible, setIsModalVisible] = useState(false);
  useEffect(() => {
    console.log("状态值------", props.store.shopModelStatus);
    setIsModalVisible(props.store.shopModelStatus);
    queryShops();
  }, [props.store]);

  console.log("模态框里面的值", pageIndex, pageNum);
  useEffect(() => {
    queryShops();
  }, [pageNum, pageIndex]);

  const handleOk = () => {
    props.dispatch({ type: "changeShopModel", status: false });
  };

  const handleCancel = () => {
    props.dispatch({ type: "changeShopModel", status: false });
  };

  const columns = [
    {
      title: "门店名",
      dataIndex: "name",
    },
    {
      title: "主营业态",
      dataIndex: "businessType",
      render: (item) => <>{busFindNameByEum[item]}</>,
    },
    {
      title: "管理类型",
      dataIndex: "managementType",
      render: (item) => <>{manFindNameByEum[item]}</>,
    },
    {
      title: "营业时间",
      dataIndex: "openingHours",
      render: (text) => text.openTime + "~" + text.closeTime,
    },
    {
      title: "营业面积",
      dataIndex: "businessArea",
    },
  ];

  return (
    <>
      <Modal
        title="Shop Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        width={800}
        footer={
          [] // 设置footer为空，去掉 取消 确定默认按钮
        }
      >
        <Table
          pagination={false}
          dataSource={data.records}
          columns={columns}
          rowKey="id"
          onRow={(record) => {
            return {
              onClick: () => {
                props.dispatch({
                  type: "changeShopName",
                  name: { bNo: record.businessNo, name: record.name },
                });
                props.dispatch({ type: "changeShopModel", status: false });
              },
            };
          }}
        />
        <Row>
          <Col span={8}> </Col>
          <Col span={8}>
            <Space>
              <span>&lt;&lt;</span>
              <Pagination
                size="small"
                total={data.totalCount}
                pageSize={pageNum}
                onChange={(num) => {
                  setPageIndex(num);
                }}
              />
              <span>&gt;&gt;</span>
            </Space>
          </Col>
          <Col span={8}>
            <span>每页</span>
            <input
              style={{ width: 35 }}
              defaultValue={pageNum}
              onChange={(e) => {
                setPageNum(e.target.value);
              }}
            />
            <span>条记录</span>
          </Col>
        </Row>
      </Modal>
    </>
  );
}
export default ShopModel;
